<div nz-row class="container">
    <div class="search-box">
        <nz-card [nzBordered]="false">
            <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                <nz-form-item>
                    <nz-form-label>灌区名称</nz-form-label>
                    <nz-form-control>
                        <input formControlName="name" nz-input placeholder="关键词"/>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label>灌区类型</nz-form-label>
                    <nz-form-control>
                        <nz-select formControlName="type" nzAllowClear nzPlaceHolder="灌区类型"
                                   style="width: 170px;">
                            <nz-option nzLabel="自流灌区" nzValue="1"></nz-option>
                            <nz-option nzLabel="扬水灌区" nzValue="2"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <!--<nz-form-item>-->
                    <!--<nz-form-label>关键词</nz-form-label>-->
                    <!--<nz-form-control>-->
                        <!--<input formControlName="keywords" nz-input placeholder="关键词"/>-->
                    <!--</nz-form-control>-->
                <!--</nz-form-item>-->
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="getGridData(true)">
                            <i nz-icon nzType="search"></i>搜索
                        </button>
                        <button nz-button nzType="danger" (click)="openEditModal()" style="margin-left: 10px"><i
                            nz-icon nzType="plus" nzTheme="outline"></i>新增
                        </button>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label>近期搜索</nz-form-label>
                    <nz-form-control>
                        <ng-container *ngIf="!latestList.length">
                            <span>暂无记录</span>
                        </ng-container>
                        <ng-container *ngIf="latestList.length">
                            <a *ngFor="let item of latestList" class="latest-item" (click)="getLatestData(item)">{{item.keyword}}</a>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </form>


        </nz-card>
    </div>
    <div nz-col class="main-panel">
        <div class="gutter-box">
            <nz-card [nzBordered]="false" class="main-grid-card" [nzTitle]="props.name" style="margin-top: 10px">
                <nz-table
                    #dataTable
                    nzBordered
                    nzShowSizeChanger
                    [nzData]="tableData"
                    nzSize="middle"
                    [nzFrontPagination]="false"
                    [nzLoading]="loading"
                    [nzTotal]="total"
                    [(nzPageIndex)]="pageNum"
                    [(nzPageSize)]="pageSize"
                    (nzPageIndexChange)="getGridData()"
                    (nzPageSizeChange)="getGridData(true)">
                    <thead>
                    <tr>
                        <th>灌区名称</th>
                        <th>管理单位</th>
                        <th>灌区类型</th>
                        <th>上级灌区</th>
                        <th>灌区面积（万亩）</th>
                        <th>干渠长度（km）</th>
                        <!-- <th>最大引水能力（m³/s）</th> -->
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let row of dataTable.data">
                        <td>{{ row.name }}</td>
                        <td>{{ row.upperManageUnit }}</td>
                        <td>{{ row.type | IrrigatedType }}</td>
                        <td>{{ row.upperDistrictName }}</td>
                        <td>{{ row.irrigatedArea }}</td>
                        <td>{{ row.trunkLegth }}</td>
                        <!-- <td>{{ row.maxWaterDiversionCapacity }}</td> -->
                        <td>
                            <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditModal(row)"></i>
                            <a nz-popconfirm nzPopconfirmTitle="确认删除该灌区吗？" nzPopconfirmPlacement="left"
                               (nzOnConfirm)="onDelete(row.id)">
                                <i nz-icon nzType="delete" nzTheme="outline"></i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </nz-card>
        </div>
        <div nz-col class="right-panel gutter-row">
            <div class="gutter-box">
                <nz-card [nzBordered]="false">
                    <app-statistics [statOpt]="statOpt"></app-statistics>
                </nz-card>
            </div>
        </div>
    </div>

</div>

<nz-modal nzClassName="custom-modal" nzWidth="950" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="detailForm" class="form-content">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>灌区名称</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="灌区名称" formControlName="name">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>灌区类型</nz-form-label>
                    <nz-form-control>
                        <nz-select placeholder="灌区类型" formControlName="type">
                            <nz-option nzLabel="自流灌区" nzValue="1"></nz-option>
                            <nz-option nzLabel="扬水灌区" nzValue="2"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>所属灌区</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="所属灌区" formControlName="upperDistrictName">
                    </nz-form-control>
                </nz-form-item>
            </div>
         
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>设计流量</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="设计流量" formControlName="cheadFlux">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>总干渠长度</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="总干渠长度" formControlName="trunkLegth">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>灌溉面积</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="灌溉面积" formControlName="irrigatedArea">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>灌区管理单位</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="灌区管理单位" formControlName="upperManageUnit">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>引水水源</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="引水水源" formControlName="headwaters">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>主要种植作物</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="主要种植作物" formControlName="crop">
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </form>
</nz-modal>
